2023 상반기를 돌아보며
나는 무엇을 했나!
2023-07-05
벌써,,2023년의 상반기가 갔다. 정말시간이 빨리 가는 것 같기도 하다!
상반기를 요약해보자면 두 개의 키워드가 존재한다!
- 내 개인 블로그 개발!
- 데브코스에서 공부!
개인 블로그 개발
원래 티스토리만 사용하다, 나만의 블로그를 만들어보고 싶어서 개발을 했다. 개인 블 로그 개발을 할떄, 새로 나온 Next.js의 app라우터를 써보고 싶기도 했고, 상대적으로 블로그 개발 시 자료가 많은 Next js을 선택했다.
블로그 개발 중 만났던 것들..
- lighthouse 개선
처음 블로그를 만들고 배포를 했을떄, lighthouse 점수가 굉장히 낮은걸 볼 수 있었다 . 특히 Total blocking time점수가 되게 낮았는데,
빌드 후 번들 크기를 측정해서 원인을 찾을 수 있었다.
어마어마하게 많은 언어 파일들이 보인다. 나는 react-syntax-highlighter패키지를 이용해 자바스크립트 코드를 코드블 록 형태로 변환을 했는데, 이 패키지가 다른 highlight.js이라는 패키지 에 의존하고 있고, 결국 내가 설치한 패키지의 문제였다.
결국
- react-syntax-highlighter의 대안으로 다른 라이브러리를 찾아서 바꾸던가
- 내가 설치한 패키지를 유지한채 번들크기를 줄이거나둘 중 하나를 선택해야 했다.
그러나 뭔가 오기가 생기기도 하고, 다른 라이브러리로 대채하는 것 대신 이미 설치한 패키지를 유지한채 어떻게 개선하면 좋을지 찾아보다
next js의 dynamic import기능을 사용해보았다.
Dynamic import
Next js의 dynamic import을 이용하면 코드 분할을 적용할 수 있다. Next js의 동적가 져오기는 개발자가 모든 것을 미리 로드하지말고, 필요에 따라 구성요소를 로드할수있 는 기능이다.
애플리케이션에서 초기 로딩떄부터 사용하지 않는 부분이 존재 가능하며, 그 부분의사 이즈가 크다면 도입 할 수 있다.
나의 경우에는 코드 블록을 이쁘게 꾸며주는 역할의 패키지는 초기 로딩떄 사용되지않 고, 해당 패키지의 크기가 매우 크기 떄문에 이를 도입했다!
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/hello'));
- 내 프로젝트에 적용한 코드 부분
//CodeBlock.tsx
'use client';
import dynamic from 'next/dynamic';
const SyntaxHighlighter = dynamic(() => import('react-syntax-highlighter'));
import { rainbow } from 'react-syntax-highlighter/dist/esm/styles/hljs';
export default function CodeBlock({
children,
}: {
children: string | string[],
}) {
return (
<SyntaxHighlighter language="javascript" wrapLines={true} style={rainbow}>
{children}
</SyntaxHighlighter>
);
}
이렇게 동적 가져오기를 사용하니 최초 로드 시 페이지가 체감상 더 빨라진 걸 느낄수 있었고, 실제 점수도 많이많이 올랐다!
다만, 실제 postPage는 점수가 낮은데,,이것도 계속 개선해 볼 생각이다!
데브코스
벌써 데브코스에 합류하고 시간이 많이 지났다.
데브코스를 합격하고 합격한 그날 되게 기분 좋아서 그냥 하루종일 놀았던?기억이 난 다. 데브코스는 내가 생각한 것 그 이상으로 되게 좋은데 좋은 이유는 크게 4가지이다 !
커피챗 + 멘토님의 든든함
아무래도 공부하다 모르는 부분이 있으면 멘토님에게 물어볼 수 있는 든든함(?)이 존 재한다. 그리고 커피챗을 통해 멘토님께 그동안 궁금했던 것 + 이것저것을 매주마다계 속 질문을 했던 것 같다. 멘토님께서도 질문에 대해 답변을 너무너무 성실해 해주셔서 값진 시간이었던 것 같다!
이런 자잘한 팁들뿐만 아니라 항상 궁금했던, 컴포넌트를 잘 나누는 기준 등과 같은질
문에 대한 답을 그래도 많이 얻어갈 수 있어서 매우 유익했다.
같은 분야를 바라보며 공부하는 다른 짱짱한 동료분들
이것도 데브코스에서 얻을 수 있는 큰 장점이라고 생각한다. 아무래도 학교에만 있는 것보다, 프론트엔드 분야를 같이 공부하는 동료들이 정말 많았고, 덩달아 나도 더 동 기부여가 된다.
개발적으로 정말 훌륭한 분들도 많고, 진짜 열정 끝판왕인 분들도 엄청엄청 많다. 이 런 좋은 동료분들을 만날 수 있는 것도 데브코스만 줄 수 있는 경험이라고 생각한다.
데브코스에서 자바스크립트 스터디를 하게 되었을떄, 스터디원분들의 질문에 쩔쩔 맸 던(?) 것도 어쩌면 데브코스라서 얻을 수 있는 경험이었다고 생각한다. 그러다보니, 요즘에는 책만 읽고 끝내는 것이 아니라, 책에 나온 키워드를 통해 다양한 글을 찾아 보는 습관이 생긴 것 같아서 좋다.
자바스크립트를 깊게 알 수 있는 환경
데브코스에 합격하기 전에도 항상 자바스크립트를 제대로 배우고 싶다 라는 생각을 마 음 한켠에서 계속 해왔던 것 같다. 정말 자바스크립트만 공부를 했다. 자바스크립트로 SPA환경은 어떻게 만들지부터 바닐라 자바스크립트로 컴포넌트는 어떤식으로 작성해야 할지등등....
강의와 과제를 하다보면 내가 자바스크립트를 정말 몰랐구나.,,,라는 것을 느끼고 있 다.
특히 멘토님 + 팀원분들의 코드리뷰를 통해 좋은 코드는 이러한 거구나,,,라는 것을어 렴풋이 배워가고 있는 느낌이다.
과제는 크게 3가지로 나뉘었다!
- 트리,트라이를 이용한 자동완성 구현
- TodoApp만들기!
- 노션클로닝 과제(진행 중..,,)
보완해야 할 점
지금까지 한 과제들을 코드리뷰도 다 반영하고 다시 제데로 뜯어서 고치고 싶은데 , 아 나중에 해야지~하고 미루게 된다🤣. 노션 클로닝과제가 끝나면 지금까지 한 과제들 을 다시 한번 제대로 볼 생각이다!
지식을 공부할떄 내가 너무 얕게만 공부한게 아닐까..?하는 아쉬움도 든다. 7월부터는 지식을 좀 깊이있게 공부하고 싶다.
블로그를 개선하고 싶다. 정확히는 카테고리별로 글을 랜더링하게 만들거고, OpenGraph도 블로그에 채워넣고 싶다.
책을 사놓고 안읽는다.. 아예 책 읽는 시간을 따로 잡을 필요가 있는 거 같아서 7월부 터는 아예 책 읽는 시간!을 따로 정했다.
그럼 7월도 화이팅💪💪💪💪